<script setup>
import Avartar from '@renderer/components/common/Avartar.vue'
import UnreadPrompt from '@renderer/components/common/UnreadPrompt.vue'

defineEmits(['selected', 'rightclicked'])

defineProps({
    data: Object,
    activeID: String
})
const AVARTAR_SIZE = '45px'
</script>

<template>
    <div class="firends-list-container">
        <transition-group name="list">
            <div
                v-for="item in data"
                :key="item.id"
                :class="{
                    block: true,
                    selected: item.id == activeID,
                    unselected: item.id != activeID
                }"
                @click="$emit('selected', item.id)"
                @contextmenu.prevent="$emit('rightclicked', item.id)"
            >
                <avartar class="avartar" :src="item.avartar" :size="AVARTAR_SIZE" />
                <div class="details" :title="item.message || ''">
                    <div class="top-details">
                        <span class="name">{{ item.username || '' }}</span>
                        <span class="time">{{ item.time || '' }}</span>
                    </div>
                    <div class="bottom-details">
                        <span>{{ item.message || '' }}</span>
                        <unread-prompt
                            v-if="item.unreadNum && item.unreadNum != 0"
                            class="unread-prompt"
                            :number="item.unreadNum"
                        />
                    </div>
                </div>
            </div>
        </transition-group>
        <div class="placeholder-bottom"></div>
    </div>
</template>

<style scoped lang="scss">
@import '@renderer/assets/scss/mixins';

$block-height: 40px;
$block-padding: 18px;
$avartar-size: v-bind(AVARTAR_SIZE);
$gap-between-top-bottom-details: 3px;
$gap-between-avartar-details: 10px;

$name-font-size: 15px;
$name-font-weight: 600;
$time-font-size: 12px;
$message-font-size: 13px;

.placeholder-bottom {
    @include set-size($height: $block-height);
}

.firends-list-container {
    @include list-animation;
    height: 100%;
    position: relative;
    overflow-y: auto;
}

.block {
    @include set-size($height: $block-height);
    display: flex;
    padding: $block-padding;
    align-items: center;

    .details {
        width: calc(100% - (2 * $block-padding + $gap-between-avartar-details + $avartar-size));
        margin-left: $gap-between-avartar-details;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .top-details {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: $gap-between-top-bottom-details * 0.5;
            .name {
                font-size: $name-font-size;
                font-weight: $name-font-weight;
                color: var(--fg-color-1);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .time {
                font-size: $time-font-size;
                color: var(--fg-color-2);
                margin-bottom: 5px;
            }
        }

        .bottom-details {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-top: $gap-between-top-bottom-details * 0.5;

            span {
                width: calc(100% - 50px);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: var(--fg-color-2);
                font-size: $message-font-size;
            }
        }
    }
}

.selected {
    background-color: var(--theme-color);

    span {
        color: var(--fg-color-3) !important;
    }
}

.unselected {
    &:hover {
        background-color: var(--bg-color-1);
    }
}
</style>
